<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Lightue • TodoMVC</title>
    <link rel="stylesheet" href="node_modules/todomvc-common/base.css" />
    <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css" />
  </head>
  <body>
    <script src="node_modules/todomvc-common/base.js"></script>
    <script src="node_modules/director/build/director.js"></script>
    <script src="dist/lightue.min.js"></script>
    <script>
      var L = Lightue,
        STORAGE_KEY = 'todos-lightue',
        S = L.useState({
          todos: JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'),
          editedTodo: null,
          visibility: '',
        }),
        beforeEditCache = '',
        router = new Router(),
        routes = [
          ['', 'All'],
          ['active', 'Active'],
          ['completed', 'Completed'],
        ]

      routes.forEach(function (route) {
        router.on(route[0], function () {
          S.visibility = route[0]
        })
      })
      router.init()

      L.watchEffect(() => localStorage.setItem(STORAGE_KEY, JSON.stringify(S.todos)))

      function removeTodo(todo) {
        S.todos = S.todos.filter((t) => t != todo)
      }

      function doneEdit(todo, value) {
        if (S.editedTodo) {
          S.editedTodo = null
          todo.title = value.trim()
          if (!todo.title) removeTodo(todo)
        }
      }

      function getRemainingString(count) {
        return count + ' item' + (count == 1 ? '' : 's') + ' left'
      }

      L({
        todoapp: L.section({
          header: L.header({
            $$: {
              $tag: 'h1',
              $$: 'todos',
            },
            newTodo: L.input({
              _placeholder: 'What needs to be done?',
              _autofocus: 'autofocus',
              onkeydown: (e) => {
                var newTodo = e.target.value.trim()
                if (e.key == 'Enter' && newTodo) {
                  S.todos.push({
                    id: Date.now(),
                    title: newTodo,
                    completed: false,
                  })
                  e.target.value = ''
                }
              },
            }),
          }),
          main: L.section({
            _hidden: () => S.todos.length == 0,
            toggleAll: L.input({
              _id: 'toggle-all',
              _type: 'checkbox',
              $checked: () => S.todos.filter((todo) => !todo.completed).length == 0,
              onchange: (e) => {
                var checked = e.target.checked
                S.todos.forEach((todo) => (todo.completed = checked))
              },
            }),
            $$: L.label({
              _for: 'toggle-all',
              $$: 'Mark all as complete',
            }),
            todoList: L.ul({
              $$: () =>
                S.todos.map((todo) =>
                  L.li.todo({
                    $if: () => S.visibility == '' || S.visibility == 'active' && !todo.completed || S.visibility == 'completed' && todo.completed,
                    $class: {
                      completed: () => todo.completed,
                      editing: () => todo == S.editedTodo,
                    },
                    view: {
                      toggle: L.input({
                        _type: 'checkbox',
                        $checked: () => todo.completed,
                        onchange: (e) => {
                          todo.completed = e.target.checked
                        },
                      }),
                      todoLabel: L.label({
                        ondblclick: (e) => {
                          beforeEditCache = todo.title
                          S.editedTodo = todo
                          e.target.parentElement.nextElementSibling.focus()
                        },
                        $$: todo.$title,
                      }),
                      destroy: L.button({
                        onclick: (e) => removeTodo(todo),
                      }),
                    },
                    edit: L.input({
                      _type: 'text',
                      $value: todo.$title,
                      onkeydown: (e) => {
                        if (e.key == 'Enter') {
                          doneEdit(todo, e.target.value)
                        } else if (e.key == 'Escape') {
                          S.editedTodo = null
                          todo.title = beforeEditCache
                        }
                      },
                      onblur: (e) => doneEdit(todo, e.target.value),
                    }),
                  })
                ),
            }),
          }),
          footer: L.footer({
            _hidden: () => S.todos.length == 0,
            $_todoCount: () => getRemainingString(S.todos.filter((todo) => !todo.completed).length),
            filters: L.ul(
              routes.map((route) =>
                L.li({
                  $$: L.a({
                    _href: '#/' + route[0],
                    $class: { selected: () => S.visibility == route[0] },
                    $$: route[1],
                  }),
                })
              )
            ),
            clearCompleted: L.button({
              onclick: (e) => {
                S.todos = S.todos.filter((todo) => !todo.completed)
              },
              _hidden: () => S.todos.filter((todo) => todo.completed).length == 0,
              $$: 'Clear completed',
            }),
          }),
        }),
        info: L.footer([L.p('Double-click to edit a todo'), L.p('Created by Smalllong'), L.p('Part of TodoMVC')]),
      })
    </script>
  </body>
</html>
